﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link rel="stylesheet" href="../../css/mui.plus.css" />
    <link href="../../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
        .mui-input-row {
            height: 44px !important;
        }
        .mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9 {
        	border: none;
        } 
        label>i {
        	color:#EC971F
        }
        .warning {
        	color: #EC971F;
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav pri-bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">添加病历</h1>
        <a class="mui-icon mui-pull-right">
        	<img src="../../images/icon-qrcode.png" style="width: 20px;" id="btn-qrcode"/>
        </a>
    </header>
    <footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btnSave" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">确认添加</button>
    </footer>
    <div class="mui-content oe-helper">
        <form class="mui-input-group" id="recordForm">
            <div class="mui-input-row">
                <label>姓名<i>*</i></label>
                <input type="text" name="rec_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">性别<i>*</i></label>
                <input type="hidden" value="" name="rec_sex" id="hidSex" />
                <button id="showSexBtn" type="button" class="mui-btn oe-btn-pick">请选择</button>
            </div>
            <div class="mui-input-row">
                <label>年龄<i>*</i></label>
                <input type="number" name="rec_age" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>床号</label>
                <input type="text" name="rec_bed_no" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>住院号</label>
                <input type="text" name="rec_hospital_no" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>联系电话</label>
                <input type="text" name="rec_phone" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row warning">
                <label>过敏史</label>
                <input type="text" name="rec_allergy_his" placeholder="请填写" style="text-align: right;">
            </div>
            <!--<div class="mui-input-row">
                <label>既往史</label>
                <input type="text" name="rec_past_his" placeholder="请填写" style="text-align: right;">
            </div>-->
            <ul class="mui-table-view">
                <li id="btn-past" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						既往史
                    </a>
                </li>
            </ul>
            <div class="mui-input-row">
                <label>诊断</label>
                <input type="text" name="rec_diagnosis" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>手术名称</label>
                <input type="text" name="rec_surgery_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">手术时间</label>
                <input type="hidden" name="rec_surgery_date" id="hidTime" value="" />
                <button id="showDateBtn" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2016,"endYear":2020}'>请选择</button>
            </div>
            <!--<div class="mui-input-row">
                <label>备忘录</label>
                <input type="text" name="rec_memo" placeholder="请填写" style="text-align: right;">
            </div>-->
            <ul class="mui-table-view">
                <li id="btn-memo" class="mui-table-view-cell">
                    <a class="mui-navigate-right">
						备忘录
                    </a>
                </li>
            </ul>
        </form>
        <div style="background-color: #fff;padding:15px;">
            <span>添加手术期照片</span>
            
            <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#" id="qn1">
                        <div class="mui-media-body">术前</div>
                        <img id="qnImg1" class="oe-img-add"></img>
                        <div id="qnTxt1" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#" id="qn2">
                        <div class="mui-media-body">术中</div>
                        <img id="qnImg2" class="oe-img-add"></img>
                        <div id="qnTxt2" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#" id="qn3">
                        <div class="mui-media-body">术后</div>
                        <img id="qnImg3" class="oe-img-add"></img>
                        <div id="qnTxt3" class="mui-media-body" style="font-size: 12px;">(已上传0张)</div>
                    </a>
                </li>
            </ul>
            
        </div>
    </div>
    <script src="../../js/mui.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/lib/moxie.js"></script>
    <script src="../../js/lib/plupload.dev.js"></script>
	<script src="../../js/lib/qiniu.min.js"></script>
    <script src="../../js/app.js"></script>
    <script type="text/javascript">
        (function ($, doc) {
            // 静态参数定义
            var hidSex		= document.getElementById("hidSex"),
            	hidTime 	= document.getElementById("hidTime"),
            	showSexBtn  = doc.getElementById('showSexBtn'),
            	showDateBtn = doc.getElementById('showDateBtn');
            
            var picList1 = [],  
            	picList2 = [],
            	picList3 = [];
            	
        	var picNum = 0;
        	
        	var recId;

//          $.init({});

			$('body').on('tap', '#btn-qrcode', function(){
				$.openWindow({
					url: '../pages/qrcode.html',
					waiting: {
						autoShow: false
					}
				});
			});

            $.ready(function () {
                //普通示例
                var userPicker = new $.PopPicker();
                
                userPicker.setData([{
                    value: '1',
                    text: '男'
                }, {
                    value: '0',
                    text: '女'
                }]);
                
                app.net.post('c_med_record/create',{rec_dr_id : app.storage.getUserId()},function(data){
                	recId = data.data.rec_id;
                },'json');

                showSexBtn.addEventListener('tap', function (event) {
                    userPicker.show(function (items) {
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                        if (items && items.length > 0) {
                            hidSex.value = items[0].text;
                            showSexBtn.textContent = hidSex.value;
                            if(showSexBtn.textContent !== '请选择'){
	                        	showSexBtn.style.color = '#000';
	                        }
                        }
                    });
                }, false);

                $('.mui-content').on('tap', '#showDateBtn', function () {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    /*
					 * 首次显示时实例化组件
					 * 示例为了简洁，将 options 放在了按钮的 dom 上
					 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
					 */
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        /*
						 * rs.value 拼合后的 value
						 * rs.text 拼合后的 text
						 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
						 * rs.m 月，用法同年
						 * rs.d 日，用法同年
						 * rs.h 时，用法同年
						 * rs.i 分（minutes 的第二个字母），用法同年
						 */
                        //result.innerText = '选择结果: ' + rs.text;
                        //alert(rs.text);
                        hidTime.value = rs.text;
                        showDateBtn.textContent = rs.text;
                        if(showDateBtn.textContent !== '请选择'){
                        	showDateBtn.style.color = '#000';
                        }
                        /*
						 * 返回 false 可以阻止选择框的关闭
						 * return false;
						 */
                        /*
						 * 释放组件资源，释放后将将不能再操作组件
						 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
						 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
						 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
						 */
                        picker.dispose();
                    });
                });

            });
            
            $('.mui-content').on('tap', '#btn-past', function(){
            	$.openWindow({
            		url: 'past-his.html',
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			rec_id: recId
            		}
            	});
            });
            
            $('.mui-content').on('tap', '#btn-memo', function(){
            	$.openWindow({
            		url: 'memo.html',
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			rec_id: recId
            		}
            	});
            });
            
            $.plusReady(function () {
				var btnSave = document.getElementById("btnSave");
				
				var qnOp1 = {
 						browse_button : 'qn1', //必选参数,打开文件管理器的触发器 
 						uptoken : 'ArjlNfgX9rDSZl1wMrr3PEyFG7O6v7OK9N1UGilS:9NRsiB5adL07-KcxqGThr8B4Gs4=:eyJzY29wZSI6Im9ydGhzcHJvZCIsImRlYWRsaW5lIjoxNDk2ODM4NTQ2fQ==', // uptoken 是上传凭证，由其他程序生成
 						unique_names : false,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
 						domain : '7xus80.com2.z0.glb.qiniucdn.com',     // bucket 域名，下载资源时用到，**必需**
 						auto_start: true, 
 						init : {
					        'FilesAdded': function(up, files) {
					        	picNum = 0;
					        	picList1 = [];
 					            plupload.each(files, function(file) {
					            	// 文件添加进队列后,处理相关的事情
					            });
					        },
					        'BeforeUpload': function(up, file) {
					            // 每个文件上传前,处理相关的事情
					            picNum ++;
					        },
					        'UploadProgress': function(up, file) {
				                // 每个文件上传时,处理相关的事情
				                document.getElementById("qnTxt1").innerHTML = '(正在上传第' + picNum + '张)';
					        },
					        'FileUploaded': function(up, file, info) {
					            // 每个文件上传成功后,处理相关的事情
					            document.getElementById("qnTxt1").innerHTML = '(已上传' + picNum + '张)';
					            document.getElementById("qnImg1").src = up.getOption('domain') + '/' + JSON.parse(info).key;
					            var item = {
									spic_rec_id : recId,
									spic_src    : JSON.parse(info).key,
									spic_stage  : 'PRE_OP'
								};
					            picList1.push(item);
					        },
					        'Error': function(up, err, errTip) {
					               //上传出错时,处理相关的事情
					        },
					        'UploadComplete': function() {
					               //队列文件处理完毕后,处理相关的事情
					               app.net.post('c_surgery_pic/create_batch',picList1,function(data){
					               		plus.nativeUI.toast('上传成功');
					               });
					        },
					        'Key': function(up, file) {
					            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					            // 该配置必须要在 unique_names: false , save_key: false 时才生效
								
					            var key = new Date().getTime();
					            // do something with key here
					            return key;
					        }
 						}
				}, qnOp2 = {
 						browse_button : 'qn2', //必选参数,打开文件管理器的触发器 
 						uptoken : 'ArjlNfgX9rDSZl1wMrr3PEyFG7O6v7OK9N1UGilS:9NRsiB5adL07-KcxqGThr8B4Gs4=:eyJzY29wZSI6Im9ydGhzcHJvZCIsImRlYWRsaW5lIjoxNDk2ODM4NTQ2fQ==', // uptoken 是上传凭证，由其他程序生成
 						unique_names : false,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
 						domain : '7xus80.com2.z0.glb.qiniucdn.com',     // bucket 域名，下载资源时用到，**必需**
 						auto_start: true, 
 						init : {
					        'FilesAdded': function(up, files) {
					        	picNum = 0;
					        	picList2 = [];
 					            plupload.each(files, function(file) {
					            	// 文件添加进队列后,处理相关的事情
					            });
					        },
					        'BeforeUpload': function(up, file) {
					            // 每个文件上传前,处理相关的事情
					            picNum ++;
					        },
					        'UploadProgress': function(up, file) {
				                // 每个文件上传时,处理相关的事情
				                document.getElementById("qnTxt2").innerHTML = '(正在上传第' + picNum + '张)';
					        },
					        'FileUploaded': function(up, file, info) {
					            // 每个文件上传成功后,处理相关的事情
					            document.getElementById("qnTxt2").innerHTML = '(已上传' + picNum + '张)';
					            document.getElementById("qnImg2").src = up.getOption('domain') + '/' + JSON.parse(info).key;
					            var item = {
									spic_rec_id : recId,
									spic_src    : JSON.parse(info).key,
									spic_stage  : 'MID_OP'
								};
					            picList2.push(item);
					        },
					        'Error': function(up, err, errTip) {
					               //上传出错时,处理相关的事情
					        },
					        'UploadComplete': function() {
					               //队列文件处理完毕后,处理相关的事情
					               app.net.post('c_surgery_pic/create_batch',picList2,function(data){
					               		plus.nativeUI.toast('上传成功');
					               });
					        },
					        'Key': function(up, file) {
					            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					            // 该配置必须要在 unique_names: false , save_key: false 时才生效
								
					            var key = new Date().getTime();
					            // do something with key here
					            return key;
					        }
 						}
				}, qnOp3 = {
 						browse_button : 'qn3', //必选参数,打开文件管理器的触发器 
 						uptoken : 'ArjlNfgX9rDSZl1wMrr3PEyFG7O6v7OK9N1UGilS:9NRsiB5adL07-KcxqGThr8B4Gs4=:eyJzY29wZSI6Im9ydGhzcHJvZCIsImRlYWRsaW5lIjoxNDk2ODM4NTQ2fQ==', // uptoken 是上传凭证，由其他程序生成
 						unique_names : false,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
 						domain : '7xus80.com2.z0.glb.qiniucdn.com',     // bucket 域名，下载资源时用到，**必需**
 						auto_start: true, 
 						init : {
					        'FilesAdded': function(up, files) {
					        	picNum = 0;
					        	picList3 = [];
 					            plupload.each(files, function(file) {
					            	// 文件添加进队列后,处理相关的事情
					            });
					        },
					        'BeforeUpload': function(up, file) {
					            // 每个文件上传前,处理相关的事情
					            picNum ++;
					        },
					        'UploadProgress': function(up, file) {
				                // 每个文件上传时,处理相关的事情
				                document.getElementById("qnTxt3").innerHTML = '(正在上传第' + picNum + '张)';
					        },
					        'FileUploaded': function(up, file, info) {
					            // 每个文件上传成功后,处理相关的事情
					            document.getElementById("qnTxt3").innerHTML = '(已上传' + picNum + '张)';
					            document.getElementById("qnImg3").src = up.getOption('domain') + '/' + JSON.parse(info).key;
					            var item = {
									spic_rec_id : recId,
									spic_src    : JSON.parse(info).key,
									spic_stage  : 'POST_OP'
								};
					            picList3.push(item);
					        },
					        'Error': function(up, err, errTip) {
					               //上传出错时,处理相关的事情
					        },
					        'UploadComplete': function() {
					               //队列文件处理完毕后,处理相关的事情
					               app.net.post('c_surgery_pic/create_batch', picList3,function(data){
					               		plus.nativeUI.toast('上传成功');
					               });
					        },
					        'Key': function(up, file) {
					            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					            // 该配置必须要在 unique_names: false , save_key: false 时才生效
								
					            var key = new Date().getTime();
					            // do something with key here
					            return key;
					        }
 						}
				};
				var Qiniu2 = new QiniuJsSDK(),
					Qiniu3 = new QiniuJsSDK();
            	
            	Qiniu.uploader(qnOp1);
            	Qiniu2.uploader(qnOp2);
            	Qiniu3.uploader(qnOp3);
				
				btnSave.addEventListener("tap", function () {
					var pageHelper = plus.webview.getWebviewById('main-helper.html');
                    var obj = app.utils.getJsonFromForm("recordForm", function(err){
                    	if(err){
                    		plus.nativeUI.toast(err);
                    		return;
                    	}
                    });
                    if (!obj) {
                    	plus.nativeUI.toast('您的输入有误，请重新输入');
                        return;
                    }
                    if(obj.rec_surgery_date === ''  || typeof obj.rec_surgery_date === 'undefined'){
                    	var date = new Date();
                    	obj.rec_surgery_date = date.toLocaleDateString().replace(new RegExp(/\//g), '-')
                    }
                    obj.rec_id = recId;
                    app.page.saveRecord(obj, function (data) {
                        plus.nativeUI.toast("保存成功!");
                        $.fire(pageHelper, 'start', null);
                        $.back();
                    }, function (msg) {
                        console.log(msg);
                    });
                });
            });
        }(mui, document));
    </script>
</body>
</html>